import React, { memo, useRef, useState } from "react";
import { useSelector, shallowEqual } from "react-redux";
import { PhoneLoginWrap } from "./style";
import CryptoJs from "crypto-js";
import {
  sendCaptchaSent,
  captchaVerify,
  phonePassword,
  phoneCaptcha,
} from "@/services/login";
import { setLocalStroage } from "@/utils/localStorage";

export default memo(function PhoneLogin(props) {
  const countryListRef = useRef();
  const phoneNumRef = useRef();
  const yzmRef = useRef();
  const pibRef = useRef();
  const mmRef = useRef();
  const mmmRef = useRef();
  const yzmmRef = useRef();
  const ccRef = useRef();
  const phoneLoginMessageRef = useRef();
  const [push, setPush] = useState(false);
  const [code, setCode] = useState("86");
  const [phone, setPhone] = useState(true);
  const [codeR, setCodeR] = useState(true);
  const [check, setCheck] = useState(false);
  const [checklogin, setChecklogin] = useState(false);
  const [yzmCord, setYzmCord] = useState("");

  const chooseCode = (code) => {
    setCode(code);
    countryListRef.current.style.display = "none";
    setPush(false);
  };
  const countryCodeFuc = () => {
    setPush(!push);
    if (!push) {
      countryListRef.current.style.display = "block";
    } else {
      countryListRef.current.style.display = "none";
    }
  };

  const { countriesInfo } = useSelector(
    (state) => ({
      countriesInfo: state.getIn(["mainInfo", "countriesCode"]),
    }),
    shallowEqual
  );

  const checkLogin = () => {
    setChecklogin(!checklogin);
    mmmRef.current.style.display = "none";
    phoneLoginMessageRef.current.style.display = "none";
    yzmmRef.current.style.display = "none";
    checklogin ? (mmRef.current.value = "") : (yzmRef.current.value = "");
    if (!checklogin) {
      yzmRef.current.style.border = "1px solid #ccc";
    } else {
      mmRef.current.style.border = "1px solid #ccc";
    }
  };
  // 设置失效
  let inFifteenMinutes = new Date(new Date().getTime() + 24 * 3600 * 1000); //一天
  // 登录

  async function gotoLogin() {
    if (!checklogin) {
      if (phoneNumRef.current.value.trim() === "") {
        phoneLoginMessageRef.current.style.display = "block";
        setPhone(false);
        return;
      }
      if (yzmRef.current.value.trim() === "") {
        yzmmRef.current.style.display = "block";
        phoneLoginMessageRef.current.style.display = "none";
        yzmRef.current.style.border = "1px solid red";
        setPhone(true);
        setCodeR(false);
      }
      if (phoneNumRef.current.value !== "" && yzmRef.current.value !== "") {
        const a = await captchaVerify(
          phoneNumRef.current.value,
          yzmRef.current.value
        );
        if (!a.code) {
          yzmmRef.current.style.display = "block";
          return;
        }
      }
    } else {
      if (mmRef.current.value.trim() === "") {
        mmmRef.current.style.display = "block";
        phoneLoginMessageRef.current.style.display = "none";
        mmRef.current.style.border = "1px solid red";
        setPhone(true);
        setCodeR(false);
      }
      if (phoneNumRef.current.value !== "" && mmRef.current.value !== "") {
        const b = await phonePassword(
          phoneNumRef.current.value,
          CryptoJs.MD5(mmRef.current.value).toString()
        );
        if (b.code === 502) {
          mmmRef.current.style.display = "block";
          return;
        }
        setLocalStroage("cookie", b.cookie, 2);
        setLocalStroage("token", b.token, 2);
        window.location.reload();
      }
    }
  }

  const checkLabel = () => {
    setCheck(!check);
  };
  // 获取验证码
  async function getCtCode() {
    const a = await sendCaptchaSent(phoneNumRef.current.value, code);
    setYzmCord(a);
  }

  return (
    <PhoneLoginWrap ref={props.phoneLoginRef}>
      <div ref={ccRef} className="country-code-phone">
        <div
          onClick={countryCodeFuc}
          className={phone ? "country-code" : "country-code codeRed"}
        >
          +{code}
          <i className="icon-up-jt"></i>
        </div>
        <input
          ref={phoneNumRef}
          className={phone ? "phoneNumber" : "phoneNumber pRed"}
          type="text"
          placeholder="请输入手机号"
        />
        <div ref={countryListRef} className="country-list">
          <ul>
            {countriesInfo.code === 200
              ? countriesInfo.data.map((item, index) => {
                  return item.countryList.map((itema, indexa) => {
                    return (
                      <li
                        onClick={(e) => chooseCode(itema.code)}
                        key={itema.zh}
                      >
                        <span>{itema.zh}</span>
                        <span>+{itema.code}</span>
                      </li>
                    );
                  });
                })
              : ""}
          </ul>
        </div>
      </div>
      <div ref={pibRef} className="password-ipt-box">
        {checklogin ? (
          <React.Fragment>
            <input
              ref={mmRef}
              className="password-ipt"
              type="password"
              placeholder="请输入密码"
            />
            <a className="forgetPassword">忘记密码?</a>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <input
              ref={yzmRef}
              className="yzm-ipt"
              type="password"
              placeholder="请输入验证码"
            />
            <a onClick={getCtCode} className="yzm" href="#/">
              获取验证码
            </a>
          </React.Fragment>
        )}
      </div>
      <div ref={phoneLoginMessageRef} className="phoneLoginMessage">
        <i className="warning imgIcon"></i>
        <span>请输入手机号</span>
      </div>
      <div ref={yzmmRef} className="yzmR">
        <i className="warning imgIcon"></i>
        <span>请输入正确的验证码</span>
      </div>
      <div ref={mmmRef} className="mmR">
        <i className="warning imgIcon"></i>
        <span>请输入正确的手机号或者密码</span>
      </div>
      <div className="forget-login">
        <span onClick={checkLogin} className="messageLogin" href="#/">
          {checklogin ? "短信登录" : "密码登录"}
        </span>
        <div className="auto-login">
          <input
            id="checkboxL"
            type="checkbox"
            onChange={checkLabel}
            checked={check}
          />
          <label className="auto-login" htmlFor="checkboxL">
            自动登录
          </label>
        </div>
      </div>
      <button onClick={gotoLogin} className="main-login-btn">
        登录
      </button>
      <div className="phone-new-loginWay">
        <span onClick={props.phoneToOtherWay}>其他登录方式</span>
        <span onClick={props.gotozcpages} className="zc-zh-free">
          没有账号？免费注册
        </span>
      </div>
    </PhoneLoginWrap>
  );
});
